<template>
  <q-tr>
    <q-td colspan="100%" class="total-row">
      <div class="inline-block font-size-16 margin-r-20" v-if="showSumLabel">合计:</div>
      <div class="inline-block font-size-16 margin-r-20" v-for="(item, index) in data" :key="index">{{item.label}}: {{item.value}}</div>
    </q-td>
  </q-tr>
</template>

<script>
export default {
  name: 'total-row',
  props: {
    data: {
      default: [],
      required: true
    },
    showSumLabel: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="stylus">
.total-row{
  font-size: 0
  background-color: #F9F9F9
  &:hover{
    background-color: #F9F9F9
  }
}
td.total-row{
  position sticky
  bottom 0
}
</style>
